﻿<link href="@Url.Content("~/Content/csstyle.css")" rel="stylesheet" type="text/css" />

<script href="@Url.Content("~/Script/csjquery.js")" type="text/javascript"></script>
<h1 class="title">
    Gym Schedule</h1>
<div id="servicesBox">

	<div id="serBox1" class="serBox">
		<div class="serBoxOn"></div>
		<div class="pic1 mypng"><img src="../../Content/csimages/ser_box1.png" /></div>
		<div class="pic2 mypng"><img src="../../Content/csimages/ser_box1b.png" /></div>
		<div class="txt1"><span class="tit">yoga</span><b>Increased disease resistance, improve the mental and emotional</b></div>
		<div class="txt2"><span class="tit">yoga</span><p style="text-align:center;"><b>Monday 18:00 ~ 20:00 p.m.</p><br/><p style="text-align:center">Saturday 14:00 ~ 16:00 p.m.</p></b></div>
	</div>

	<div class="fgH20"></div>

	<div id="serBox2" class="serBox">
		<div class="serBoxOn"></div>
		<div class="pic1 mypng"><img src="../../Content/csimages/ser_box2.png" /></div>
		<div class="pic2 mypng"><img src="../../Content/csimages/ser_box2b.png" /></div>
		<div class="txt1"><span class="tit">swimming</span><b>Increase the lung capacity, exercise the body</b></div>
		<div class="txt2"><span class="tit">swimming</span><p style="text-align:center"><b/>Tuesday 18:00 ~ 20:00 p.m.</p><br/><p style="text-align:center">Saturday 16:00 ~ 18:00 p.m.</p></b></div>
	</div>

	<div></div>

	<div id="serBox3" class="serBox"">
		<div class="serBoxOn"></div>
		<div class="pic1 mypng"><img src="../../Content/csimages/ser_box3.png" /></div>
		<div class="pic2 mypng"><img src="../../Content/csimages/ser_box3b.png" /></div>
		<div class="txt1"><span class="tit">boxing</span><b>Enhance the power of the human body, a kind of effective means of self-defense</b></div>
		<div class="txt2"><span class="tit">boxing</span><p style="text-align:center"><b>Wednesday 18:00 ~ 20:00 p.m.</p><br/><p style="text-align:center">Sunday 14:00 ~ 16:00 p.m.</p></b></div>
	</div>

    <div class="fgH20"></div>

    <div id="serBox4" class="serBox">
		<div class="serBoxOn"></div>
		<div class="pic1 mypng"><img src="../../Content/csimages/ser_box4.png" /></div>
		<div class="pic2 mypng"><img src="../../Content/csimages/ser_box4b.png" /></div>
		<div class="txt1"><span class="tit">spinning</span><b>Good choice to lose weight, exercise the body</b></div>
		<div class="txt2"><span class="tit">spinning</span><p style="text-align:center"><b>Thursday 18:00 ~ 20:00 p.m.</p><br/><p style="text-align:center">Sunday 16:00 ~ 18:00 p.m.</p></b></div>
	</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {

        $(".serBox").hover(function () {
            $(this).children().stop(false, true);
            $(this).children(".serBoxOn").fadeIn("slow");
            $(this).children(".pic1").animate({ right: -110 }, 400);
            $(this).children(".pic2").animate({ left: 105 }, 400);
            $(this).children(".txt1").animate({ left: -240 }, 400);
            $(this).children(".txt2").animate({ right: 40 }, 400);
        }, function () {
            $(this).children().stop(false, true);
            $(this).children(".serBoxOn").fadeOut("slow");
            $(this).children(".pic1").animate({ right: 105 }, 400);
            $(this).children(".pic2").animate({ left: -110 }, 400);
            $(this).children(".txt1").animate({ left: 40 }, 400);
            $(this).children(".txt2").animate({ right: -240 }, 400);
        });

    });

    function serFocus(i) {
        $(".servicesPop").slideDown("normal");
        changeflash(i);
    }
    function closeSerPop() {
        $(".servicesPop").slideUp("fast");
    }

    var currentindex = 1;
    function changeflash(i) {
        currentindex = i;
        for (j = 1; j <= 6; j++) {
            if (j == i) {
                $("#flash" + j).fadeIn("normal");
                $("#flash" + j).css("display", "block");
                $("#f" + j).removeClass();
                $("#f" + j).addClass("dq");
            } else {
                $("#flash" + j).css("display", "none");
                $("#f" + j).removeClass();
                $("#f" + j).addClass("no");
            }
        }
    }


</script>